<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>监视属性_天气案例</title>
	<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
	<!-- 准备好一个容器 -->
	<div id="root">
		<h1>今天天气很很一般</h1>
		<button name="切换" @click="changeWeather">切换</button>
	</div>
</body>
<script type="text/javascript">
	Vue.config.productionTip = true
	//创建Vue实例
	const vm = new Vue({
		el:'#root',      
		data:{
			isHot:true
		}, //data中的数据可以通过函数来获取
		methods:{
			changeWeather(){
				this.isHot = !this.isHot
			}
		},
		computed:{
			factTemperture(){
				return this.isHot ? '炎热' : '寒冷'
			}
		}
		
	})
</script>
</html>